import styled from "styled-components"
// import * as vars from "./style/variables"
import { primaryColor, largeSize } from "./style/variables"
// 1.基本使用
export const AppWrapper = styled.div`
    .footer {
        border: 1px solid orange;
    }
`
// 2.子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供的属性
// color 函数中返回 color(props)，
// 那么就可能会出现这个报错。
// 因为styled-components组件在渲染时会不断地调用属性函数，
// 如果属性函数引用了自身，就会导致无限循环，
// 最终导致 Maximum call stack size exceeded 错误的出现。
// 5.从一个单独的文件引入变量
export const SectionWrapper = styled.div.attrs((props) => {
    return {
        tColor: props.color || "blue"
    }
})`
    border: 1px solid red;
    .title {
        font-size: ${(props) => props.size}px;
        color: ${(props) => props.tColor};
        /* &表示对父选择器的引用 */
        &:hover {
            background-color: purple;
        }
    }

    .content {
        font-size: ${largeSize}px;
        color: ${primaryColor};
    }
`
